<template>
  <div>
    <a-form @submit="handleSubmit" style="width:60%;margin:0px auto;margin-top: 20vh;" :form="form">
      <a-form-item v-bind="formItemLayout" label="手机号码" help="此手机号将作为登录账号">
        <div>
          <a-input
            placeholder="请输入手机号码"
            v-decorator="[
                        'phone',
                        {
                            rules: [{
                            required: true, message: '请输入手机号码',
                            },{validator: validateCode}],validateTrigger: 'blur'
                        }
                        ]"
          />
          <a-button v-if="issend" type="primary" @click="getCode" :loading="lloading">获取验证码</a-button>
          <a-button v-if="!issend" disabled type="primary">{{ count }}s后可再次发送</a-button>
        </div>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="验证码">
        <a-input
          placeholder="请输入短信验证码"
          v-decorator="[
                        'validateCode',
                        {
                            rules: [{
                            required: true, message: '请输入短信验证码',
                            },{validator: validateverCode}],validateTrigger: 'blur'
                        }
                        ]"
        />
      </a-form-item>
      <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:10 }" >
              <a-button class="submitButton" type="primary" html-type="submit" :loading="loading">下一步</a-button>
          </a-col>
        </a-row>
    </a-form>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
export default {
  data() {
    return {
      step: 2,
      lloading: false,
      issend: true,
      phone: false,
      phonevalue: "",
      Confirm: false, //验证码验证是否成功
      verCode: "",
      count: "",
      timer: "",
      loading:false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 9 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12,offset:1 },
          md: { span: 10,offset:1 }
        }
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    getCode() {
      if (this.phone) {
        this.getinfocode();
      } else {
        this.$message.info("请输入手机号");
      }
    },
    getinfocode() {
      this.lloading=true;
      const data = {
        mobileNo: this.phonevalue,
        memberType: "CU"
      };
      api.getcode(
        data,
        res => {
          if (res.code == "OK") {
            this.lloading=false;
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.issend = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.issend = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$message.warning(res.message);
            this.issend = true;
            this.lloading=false;
          }
          console.log("res", res);
          // this.$message.warning(res.message);
        },
        err => {
          console.log(err);
        }
      );
    },
    codeConfirm() {
      const data = {
        mobileNo: this.phonevalue,
        memberType: "CU",
        verCode: this.verCode
      };
      api.codeCfir(
        data,
        res => {
          console.log("res", res);
          if (res.code == "OK") {
            sessionStorage.setItem("phone", this.phonevalue);
            // this.$message.warning("注册成功");
            this.loading = false;
            this.doNext(2);
          } else {
            this.$message.warning("手机验证码错误");
            this.loading = false;
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        /* eslint-disable-next-line */
        this.phone = false;
        callback("您输入手机号格式有误！");
        return;
      } else {
        if (!value) {
          this.phone = false;
        } else {
          this.phone = true;
          this.phonevalue = value;
          console.log(this.phonevalue);
        }
        callback();
      }
    },
    validateverCode(rule, value, callback) {
      const reg = new RegExp("^[0-9]{4,10}$");
      if (value && !reg.test(value)) {
        callback("您输入的验证码格式有误！");
      } else {
        this.verCode = value;
      }
      callback();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.loading = true;
          this.codeConfirm();
        }
      });
    },
    doNext(step) {
      console.log(step);
      var st = step + 1;
      this.$router.push("/PersonRegister/step" + st);
    }
  }
};
</script>

<style scoped>
.ant-input {
  width: 50%;
}
.ant-form-item{
  margin-bottom: 30px;
}
.submitButton{
  width:8vw;
}
</style>

